<template>
    <el-card class="box-card">
        <el-steps :active="active" finish-status="success">
            <el-step title="业主信息" description="业主信息"></el-step>
            <el-step title="新建车辆" description="新建车辆档案，绑定业主"></el-step>
            <el-step title="建档完成" description="车辆建档完成"></el-step>
        </el-steps>

        <div v-if="active == 1">
        <el-alert 
            title="业主手机号是业主唯一的身份证标识"
            description="未导入的业主先导入系统"
            show-icon
            style="background-color: #eef7fe;"
            :closable="false">
        </el-alert>
        <el-row class="row1">
            <el-input placeholder="请输入业主手机号" prefix-icon="el-icon-user-solid" v-model="vehicle.phone">
            </el-input>
        </el-row>
        <el-row class="row1">
            <el-button type="primary" style="display: block; margin: 30px auto;" @click="nextStep">下一步</el-button>
        </el-row>

        </div>

        
    <div v-if="active == 2" class="step2">
        <el-form :model="vehicle" :rules="rules" ref="vehicle" class="demo-ruleForm">
        <el-descriptions class="margin-top" title="" :column="1" border>
            <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-user"></i>
                车牌号码
            </template>
            <el-form-item prop="licensePlateNumber">
                <el-input v-model="vehicle.licensePlateNumber"></el-input>
            </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-user"></i>
                汽车绑定资产
            </template>
            <el-form-item prop="propertyVehicleBinding">
                <el-input v-model="vehicle.propertyVehicleBinding"></el-input>
            </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                车辆类型
            </template>
            <el-form-item prop="vehicleCategory">
                <el-select v-model="vehicle.vehicleCategory" placeholder="请选择车辆类型">
                    <el-option label="七座及以下小客车/小型货车" value="1"></el-option>
                    <el-option label="七座以上客车/中大型货车" value="2"></el-option>
                </el-select>
            </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-location-outline"></i>
                是否新能源
            </template>
            <el-form-item prop="isNewEnergy">
                <el-radio-group v-model="vehicle.isNewEnergy">
                    <el-radio label="1">是</el-radio>
                    <el-radio label="2">否</el-radio>
                </el-radio-group>
            </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-tickets"></i>
                备注
            </template>
            <el-form-item prop="remark">
                <el-input type="textarea" v-model="vehicle.remark"></el-input>
            </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-location-outline"></i>
              上传照片
          </template>
          <el-upload
            class="upload-demo"
            ref="upload"
            action="http://localhost:8099/upload-images"
            limit="1"
            name="images"
            :on-success="handleSuccess"
            :file-list="vehicle.images"
            :headers="getToken()"
            :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-descriptions-item>
        </el-descriptions>
        <el-form-item>
            <el-button type="primary" @click="saveimage()">立即创建</el-button>
            <el-button @click="resetForm('vehicle')">重置</el-button>
        </el-form-item>
        </el-form>        
    </div>


        <div v-if="active == 3">
        <el-result icon="success">
        <template slot="extra">
            <el-empty description="绑定完成"></el-empty>
            <el-button type="primary" size="medium" @click="returnStep1">返回</el-button>
        </template>
        </el-result>
       
    </div>
    </el-card>
</template>

<script>
export default {
    name:'createVehicle',
    data(){
        return{
            active:1,
            vehicle:{
                licencePlateNumber:'',
                propertyVehicleBinding:'',
                vehicleCategory:'',
                isNewEnergy:'',
                remark:'',
                phone:'',
                images:[]
            },
            rules: {
                licencePlateNumber: [
                    { required: true, message: '车牌号不能为空', trigger: 'blur' },
                    { min: 7, max: 7, message: '车票号必须为7位', trigger: 'blur' }
                ],
                vehicleCategory: [
                    { required: true, message: '请选择车辆类型', trigger: 'change' }
                ],
                isNewEnergy:[
                    { required: true, message: '请选择能源类型', trigger: 'change' }
                ],
            },

        }
    },
    methods:{
        initAuthority(){
        this.$request.get("/role/authority",{
          params:{
            id: JSON.parse(localStorage.getItem("admin")).id,
            index: 15
          }
        })
        .then(res =>{
          this.Authority = res.data
          if(res.data == '1'){
            // this.initTable()
          }else{
            this.$message.error("你没有权限访问此功能")
            this.$router.push("/")
          }
        })
        .catch(err =>{
          console.log(err)
        })

      },
        getToken(){
            let admin = JSON.parse(localStorage.getItem("admin")).token
            const token = {'token':admin}
            return token
        },
        nextStep(){
            if(this.vehicle.phone.length != 0){
                this.$request.get("/owner/getowner",{
                    params:{
                        phone:this.vehicle.phone,
                    }
                })
                .then(res=>{
                    if(res.status == 200){
                        this.active = 2
                    }else if(res.status == 400){
                        this.$message({
                            type:'error',
                            message:'业主未创建',
                            showClose:true
                        })
                    }
                })
                .catch(err=>{
                    console.log(err)
                })

            }
        },
        returnStep1(){
            this.vehicle.phone = ''
            this.active = 1
            this.resetForm('vehicle')
        },
        saveimage(){
            this.$refs.upload.submit()
        },
        handleSuccess(e){
            if(e.status == 200){
                this.vehicle.images = e.data
                this.submitForm('vehicle')
            }else{
                this.$message.error("上传图片错误")
            }
        },
        submitForm(vehicle){
            console.log(this.vehicle.images)
            this.$refs[vehicle].validate((valid) => {
            if (valid) {
                this.$request.post("/vehicle/create",this.vehicle)
                .then(res=>{
                    if(res.status == 200){
                        this.$message({
                        type:'success',
                        message:'档案创建成功',
                        showClose:true
                    })
                    this.active = 3
                    }else{
                        this.$message.error("错误")
                    }
                    
                })
                .catch(err=>{
                    console.log(err)
                })

            
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        resetForm(vehicle) {
            this.vehicle = {
                licencePlateNumber:'',
                propertyVehicleBinding:'',
                vehicleCategory:'',
                isNewEnergy:'',
                remark:'',
                phone:'',
                images:[]
            }
        },
    }
}
</script>

<style>
.el-alert{
    width: 50%;
    height: 120px;
    margin: 100px auto 15px;
    border-radius: 2%;
    font-size: larger;
}

.step2{
    margin: 50px ;
}
.row1{
    width: 50%;
    margin: 0 auto;
}
</style>